<template lang="pug">
.specimen
  .specimen__header
    .specimen__header-left
      SectionTitle(padding="0 8px") 标本信息
    .specimen__header-content
      SectionTitle(padding="0 8px") 结果分析
    .specimen__header-right
      SectionTitle(padding="0 8px") 设备信息

      .switch 
        .switch__title
          span 切换仪器
        .switch__select
          mt-select(
            v-bind="selectEquipmentProps" 
            v-model="instrumentId"  
            style="width: 200px;"
          )

  .specimen__content
    el-scrollbar.specimen__content-form 
      SpecimenInfo(
        :specimen="currentSpecimen"
        :deviceId="instrumentId"
        @project-updated="onProjectUpdated"
        @cancelled="onCancelled"
        @saved="onSaved"
      )
    .specimen__content-table
      BaseProject(
        :selectEquipment="currentSpecimen" 
        ref="baseProjectRef"
      )
    .specimen__content-tabs
      mt-tabs(v-model="activeName")
        mt-tab-pane(
          :label="`标本列表(${specimenCount})`"
          name="标本列表"
        )
          SpecimenList(
            v-if="activeName === '标本列表'"
            :deviceId="instrumentId"
            :onSelect="setCurrentSpecimen"
            :onRefreshData="onRefreshSpecimenListData"
            ref="specimenListRef"
          )
        mt-tab-pane(
          label="仪器数据"
          name="仪器数据"
        )
          Instrument(
            v-if="activeName === '仪器数据'"
            :deviceId="instrumentId"
          )
        
        mt-tab-pane(
          label="历史数据"
          name="历史数据"
        )
          HistoryRecord(
            v-if="activeName === '历史数据'"
            :deviceId="instrumentId"
          )

</template>
<script setup lang="ts">
import { type SelectProps, SectionTitle } from "@scmt/common-components";
import SpecimenInfo from "./components/SpecimenInfo.vue";
import SpecimenList from "./components/specimenList.vue";
import { useApi } from "@scmt/core-api";
import type { SpecimenEntity } from "@scmt/api-lis-specimen";
import Instrument from "./components/Instrument.vue";
import BaseProject from "./components/baseProject.vue";
import { analysisContextKey } from "./conposables/context";
import HistoryRecord from "./components/HistoryRecord.vue";

const $api = useApi();

const activeName = ref("标本列表");
const instrumentId = ref("");
const currentSpecimen = ref<null | SpecimenEntity>(null);
const baseProjectRef = ref<null | InstanceType<typeof BaseProject>>(null);
const specimenListRef = ref<null | InstanceType<typeof SpecimenList>>(null);
const specimenCount = ref(0);

/**
 * 设备选择下拉框属性
 */
const selectEquipmentProps = computed<SelectProps>(() => {
  const props: SelectProps = {
    loadMethod: () =>
      $api.lis.instrument.listAsOptions().then((res) => {
        if (res.length) {
          instrumentId.value = res[0].value;
        }
        return res;
      }),
    separator: ",",
    placeholder: "请选择设备",
    multiple: false,
  };

  return props;
});

const onProjectUpdated = () => {
  refreshCheckResult();
};

const getCheckResult = () => {
  return baseProjectRef.value?.getCheckResult();
};

const onSaved = () => {
  refreshCheckResult();
};

const onCancelled = () => {
  setCurrentSpecimen(null);
};

const refreshCheckResult = () => {
  if (currentSpecimen.value?.id) {
    baseProjectRef.value?.query(currentSpecimen.value?.id);
  }
};

const setCurrentSpecimen = (specimen: SpecimenEntity | null) => {
  currentSpecimen.value = specimen;
};

const onRefreshSpecimenListData = (items: SpecimenEntity[]) => {
  specimenCount.value = items.length;
};

provide(analysisContextKey, {
  getCheckResult,
  setCurrentSpecimen,
});
</script>

<style lang="less" scoped>
@info-width: 380px;
@equipment-width: 700px;
.specimen {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &__header,
  &__footer {
    flex-shrink: 0;
    display: flex;
  }

  &__header {
    display: flex;
    align-items: center;

    &-left {
      width: @info-width;
    }

    &-content {
      flex: 1;
      overflow: hidden;
    }

    &-right {
      width: @equipment-width;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  &__content {
    margin-top: var(--mt-margin);
    flex: 1 0 0;
    display: flex;
    overflow: hidden;

    &-form,
    &-table,
    &-tabs {
      box-sizing: border-box;
      padding: var(--mt-padding);
      background-color: var(--el-color-white);
    }

    &-table,
    &-tabs {
      border-left: 1px solid var(--el-border-color);
    }

    &-form {
      width: @info-width;
    }

    &-table {
      flex: 1;
      overflow: hidden;
    }

    &-tabs {
      width: @equipment-width;
      :deep(.data-page) {
        padding: 0 !important;
        padding-top: var(--mt-padding) !important;
      }
    }
  }

  &__footer {
    display: none;
    margin-top: var(--mt-margin);
    justify-content: left;
    padding: var(--mt-padding);
    box-shadow: var(--el-box-shadow);
    background-color: var(--el-color-white);

    &-actions {
      display: flex;
      justify-content: center;
    }
  }
}

.switch {
  display: flex;
  align-items: center;

  &__title {
    font-weight: 700;
  }

  &__select {
    margin-left: var(--mt-margin);
  }
}
</style>
